<template>
  <apply-layout :current="1">
    <div class="form-list">
      <div class="form-list-item">
        <div class="label">姓名</div>
        <div class="content">{{form.aac003}}</div>
      </div>
      <div class="form-list-item">
        <div class="label">身份证号</div>
        <div class="content">{{form.aac002}}</div>
      </div>
    </div>
    <div style="height: .2rem;background: #f5f5f5;"></div>
    <div class="form">
      <yd-cell-group>
        <!--<yd-cell-item>
          <span slot="left" class="label required">姓名</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入姓名'}]"
            v-model="form.aac003"
            ref="aac003"
            placeholder="请输入姓名"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">身份证</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请输入公民身份证号码'}, {reg: $regex.idCard, msg: '身份证号码格式不正确'}]"
            v-model="form.aac002"
            ref="aac002"
            placeholder="请输入公民身份证号码"></xf-input>
        </yd-cell-item>-->
        <yd-cell-item>
          <span slot="left" class="label required">出生日期</span>
          <xf-date-picker
            :valid="[{required: true, msg: '请选择出生日期'}]"
            v-model="form.aac006"
            ref="aac006"
            :disabled="Number(userInfo.personDataOrigin) === 1"
            placeholder="请选择出生日期"
            :endDate="new Date()"
            slot="right"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">曾用名</span>
          <xf-input
            slot="right"
            :valid="[{reg: /^.{0,20}$/, msg: '曾用名最多20个字符'}]"
            v-model="form.expUserName"
            ref="expUserName"
            placeholder="请输入曾用名"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">籍贯</span>
          <xf-multi
            :name-val.sync="form.aac025"
            :valid="[{required: true, msg: '请选择籍贯'}]"
            ref="aac025"
            slot="right"
            :list="cities"
            title="选择地区"
            :columns="3"
            placeholder="请选择籍贯"></xf-multi>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">出生地</span>
          <xf-multi
            :name-val.sync="form.expCardNumber"
            ref="expCardNumber"
            slot="right"
            :list="cities"
            title="选择地区"
            :columns="3"
            placeholder="请输入出生地"></xf-multi>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">性别</span>
          <xf-picker
            slot="right"
            v-model="form.aac004"
            :disabled="Number(userInfo.personDataOrigin) === 1"
            ref="aac004"
            placeholder="请选择性别"
            :valid="[{required: true, msg: '请选择性别'}]"
            :list="sex"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">民族</span>
          <xf-picker
            slot="right"
            v-model="form.aac005"
            ref="aac005"
            search
            :valid="[{required: true, msg: '请选择民族'}]"
            placeholder="请选择民族"
            :list="nation"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">婚姻状况</span>
          <xf-picker
            slot="right"
            v-model="form.aac017"
            ref="aac017"
            placeholder="请选择婚姻状况"
            :list="marriage"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">政治面貌</span>
          <xf-picker
            slot="right"
            v-model="form.aac024"
            ref="aac024"
            :valid="[{required: true, msg: '请选择政治面貌'}]"
            placeholder="请选择政治面貌"
            :list="affil"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label">参加组织时间</span>
          <xf-date-picker
            :valid="[{required: false, msg: '请选择参加组织时间'}]"
            v-model="form.expPartyDate"
            ref="expPartyDate"
            placeholder="请选择参加组织时间"
            :endDate="new Date()"
            slot="right"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item v-if="false">
          <span slot="left" class="label required">参加组织时间</span>
          <xf-date-picker
            :valid="[{required: true, msg: '请选择参加组织时间'}]"
            v-model="form.expPartyDate"
            ref="expPartyDate"
            placeholder="请选择参加组织时间"
            :endDate="new Date()"
            slot="right"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">参加工作日期</span>
          <xf-date-picker
            :valid="[{required: true, msg: '请选择参加工作日期'}]"
            v-model="form.expStartJobDate"
            ref="expStartJobDate"
            :disabled="Number(userInfo.personDataOrigin) === 1"
            placeholder="请选择参加工作日期"
            :endDate="new Date()"
            slot="right"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">最高学位</span>
          <xf-picker
            slot="right"
            v-model="form.expAac037"
            ref="expAac037"
            search
            placeholder="请选择最高学位"
            :valid="[{required: true, msg: '请选择最高学位'}]"
            :list="degree"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">最高学历</span>
          <xf-picker
            slot="right"
            v-model="form.aac011"
            ref="aac011"
            placeholder="请选择最高学历"
            :valid="[{required: true, msg: '请选择最高学历'}]"
            :list="edu"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">最高学历毕业日期</span>
          <xf-date-picker
            :valid="[{required: true, msg: '请选择最高学历毕业日期'}]"
            v-model="form.aac181"
            ref="aac181"
            placeholder="请选择最高学历毕业日期"
            :endDate="new Date()"
            slot="right"></xf-date-picker>
        </yd-cell-item>
      </yd-cell-group>
    </div>
    <div class="next" slot="footer">
      <mt-button size="large" type="primary" @click="onSubmit">下一步</mt-button>
    </div>
  </apply-layout>
</template>
<script>
  import ApplyLayout from './layout.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfDatePicker from '../../../components/xf-date-picker/xf-date-picker.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import {mapGetters} from 'vuex'
  import {dics, getDics, getCities, sexDic} from '../../../common/js/dictionaries'
  import {STORAGE_TYPE} from '../../../common/js/config'
  import {parse, echo} from '../../../common/js/util'
  import XfMulti from '../../../components/xf-multi/xf-multi'

  export default {
    components: {
      XfMulti,
      XfPicker,
      XfDatePicker,
      XfInput,
      ApplyLayout},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    data() {
      return {
        form: {
          aac003: '', // 姓名
          aac002: '', // 身份证号
          aac006: '', // 出生日期
          expUserName: '', // 曾用名
          aac025: '', // 籍贯
          expCardNumber: '', // 出生地
          aac004: '', // 性别
          genderName: '', // 性别名
          aac005: '', // 民族
          aac017: '', // 婚姻状况
          aac024: '', // 政治面貌
          expPartyDate: '', // 入党时间
          expStartJobDate: '', // 参加工作时间
          expAac037: '', // 最高学位
          aac011: '', // 文化程度
          aac181: '' // 最高学历毕业日期
        },
        degree: [],
        marriage: [],
        edu: [],
        sex: sexDic,
        nation: [],
        affil: [],
        cities: [],
        canLeave: false
      }
    },
    methods: {
      onSubmit() {
        sessionStorage.setItem(STORAGE_TYPE.apply, JSON.stringify(Object.assign(this.temp, this.form)))
        this.canLeave = true
        this.$router.replace({
          name: 'apply2'
        })
      },
      getInfo() {
        this.$post('/admin/person/sapi/personal/records/perEntry/get/audit/state', {}, loading => {
          this.$message.loading(loading)
        }, false).then(res => {
          this.temp = res.data || {}
          echo(this.form, this.temp)
        })
      },
      getDics() {
        getDics(dics.degree, dics.marriage, dics.edu, dics.sex, dics.nation, dics.affil).then(res => {
          this.degree = res[0]
          this.marriage = res[1]
          this.edu = res[2]
          // this.sex = res[3]
          this.nation = res[4]
          this.affil = res[5]
        })
        getCities().then(res => {
          this.cities = res
        })
      }
    },
    created() {
      const fileStatus = Number(this.userInfo.fileStatus)
      if (fileStatus !== 0 && fileStatus !== 1 && fileStatus !== 7) {
        this.$message.alert('您的档案信息已存在，无需重复录入').then(() => {
          this.canLeave = true
          this.$router.back()
        })
        return
      }
      this.form.aac002 = this.userInfo.aac002
      this.form.aac003 = this.userInfo.aac003
      this.temp = parse(sessionStorage.getItem(STORAGE_TYPE.apply)) || {}
      echo(this.form, this.temp)
      this.getInfo()
      this.getDics()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
